<!doctype html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>框架开发</title>
		<meta name="Keywords" content="关键词,关键词">
		<meta name="description" content="">
		<!--css/js-->
<link type="text/css" href="skin/skin1.css" rel="stylesheet" id="stylecss"/>

<script type="text/javascript" src="js/jquery-1.12.1.min.js"></script>
<script type="text/javascript">
$(function(){
	//点击展开特效
	$("#Nav ul li").click(function(){
		$(this).addClass("active").siblings("li").removeClass("active");
		var _top=$(this).position().top;
		$(this).find(".menu").css("top",-_top).animate({"width":"200px"},300);
		$(this).siblings("li").find(".menu").css("width","0px");
	});


	//缩回按扭
	$("#Nav ul li .menu .but").click(function(e){
		e.stopPropagation();
		$(this).parent().animate({"width":"0px"},300);
	});

	//点击换肤
	
	$("span.skin1").click(function(){
		$("#stylecss").attr("href","skin/skin1.css");
		
	});

	$("span.skin2").click(function(){
		$("#stylecss").attr("href","skin/skin2.css");
		
	});



});



	
</script>
	</head>

<body>

<span class="skin skin1"></span> <span class="skin skin2"></span>

<div id="Nav">
	<div class="Logo">TZ<span>EDU<span></div>
	<a href="#" class="Info">个人简介</a>
	<ul>
		<li><span>&#xe612;</span>Div基础
			<div class="menu">
				<dl>
					<dd><a href="http://www.taobao.com" target="main">第一章：HTML语法</a></dd>
					<dd><a href="#">第二章：HTML的标签</a></dd>
					<dd><a href="#">第三章：img图片标签</a></dd>
					<dd><a href="#">第四章：三种列表知识详解</a></dd>
					<dd><a href="#">第五章：表单元素</a></dd>
					<dd><a href="#">第六章：CSS基础语法讲解</a></dd>
					<dd><a href="#">第七章：背景详解</a></dd>
					<dd><a href="#">第八章：CSS样式</a></dd>
				</dl>
				<div class="but"></div>
			</div>
		</li>
		<li><span>&#xe610;</span>Div实战
			<div class="menu">
				<dl>
					<dd><a href="#">第一章：HTML语法</a></dd>
					<dd><a href="#">第二章：HTML的标签</a></dd>
					<dd><a href="#">第三章：img图片标签</a></dd>
					<dd><a href="#">第四章：三种列表知识详解</a></dd>
					<dd><a href="#">第五章：表单元素</a></dd>
					<dd><a href="#">第六章：CSS基础语法讲解</a></dd>
					<dd><a href="#">第七章：背景详解</a></dd>
					<dd><a href="#">第八章：CSS样式</a></dd>
				</dl>
				<div class="but"></div>
			</div>
		</li>
		<li><span>&#xe619;</span>Javascript
			<div class="menu">
				<dl>
					<dd><a href="content/js/焦点轮播图/index.html" target="main">焦点轮播图</a></dd>
					<dd><a href="content/js/无缝轮播/demo.html">无缝轮播</a></dd>
					<dd><a href="content/js/阴影随鼠标移动/index.html" target="main">阴影随鼠标移动</a></dd>
					<dd><a href="content/js/addCandremoveC.js/02-封装添加、删除classname的方法.html">封装添加、删除classname的方法</a></dd>
					<dd><a href="content/js/第5节/index.html" target="_blank">选项卡切换</a></dd>
					<dd><a href="content/js/for/jiujiu.html" target="_blank">for循环</a></dd>
					<dd><a href="content/js/showapi（ajax请求）/index.html" target="_blank">ajax请求showapi公有接口</a></dd>
					<dd><a href="content/js/showapi（ajax请求）/index.html" target="_blank">选项卡</a></dd>
				</dl>
				<div class="but"></div>
			</div>
		</li>
		<li><span>&#xe61a;</span>Js高级
			<div class="menu">
				<dl>
					<dd><a href="#">第一章：HTML语法</a></dd>
					<dd><a href="#">第二章：HTML的标签</a></dd>
					<dd><a href="#">第三章：img图片标签</a></dd>
					<dd><a href="#">第四章：三种列表知识详解</a></dd>
					<dd><a href="#">第五章：表单元素</a></dd>
					<dd><a href="#">第六章：CSS基础语法讲解</a></dd>
					<dd><a href="#">第七章：背景详解</a></dd>
					<dd><a href="#">第八章：CSS样式</a></dd>
				</dl>
				<div class="but"></div>
			</div>
		</li>
		<li><span>&#xe61a;</span>Js/jq特效
			<div class="menu">
				<dl>
					<dd><a href="content/js/加入购物车（抛物线模式）/index.html" target="main">大型天猫加入购物车(抛物线模式)</a></dd>
					<dd><a href="content/特效/3D爱心/index.html" target="main">3D爱心</a></dd>
					<dd><a href="content/特效/裁剪图片/index.html" target="_blank">裁剪图片mobile</a></dd>
					<dd><a href="content/特效/商品价格排序/商品价格排序.html" target="main">商品价格排序</a></dd>
					<dd><a href="content/特效/canvas获取图片颜色/index.html" target="main">canvas获取图片颜色</a></dd>
					<dd><a href="content/特效/图片懒加载/demo.html" target="main">图片懒加载</a></dd>
					<dd><a href="content/特效/jsonp/index.html"target="main">jsonp实现跨域请求百度360数据</a></dd>
					<dd><a href="content/特效/导航条滚动跟随/1.html" target="main">导航条滚动跟随</a></dd>
					<dd><a href="#">第八章：CSS样式</a></dd>
				</dl>
				<div class="but"></div>
			</div>
		</li>
		
		<li><span>&#xe603;</span>Css3基础
			<div class="menu">
				<dl>
					<dd><a href="#">第一章：HTML语法</a></dd>
					<dd><a href="#">第二章：HTML的标签</a></dd>
					<dd><a href="#">第三章：img图片标签</a></dd>
					<dd><a href="#">第四章：三种列表知识详解</a></dd>
					<dd><a href="#">第五章：表单元素</a></dd>
					<dd><a href="#">第六章：CSS基础语法讲解</a></dd>
					<dd><a href="#">第七章：背景详解</a></dd>
					<dd><a href="#">第八章：CSS样式</a></dd>
				</dl>
				<div class="but"></div>
			</div>
		</li>
		<li><span>&#xe7ab;</span>Html5基础
			<div class="menu">
				<dl>
					<dd><a href="#">第一章：HTML语法</a></dd>
					<dd><a href="#">第二章：HTML的标签</a></dd>
					<dd><a href="#">第三章：img图片标签</a></dd>
					<dd><a href="#">第四章：三种列表知识详解</a></dd>
					<dd><a href="#">第五章：表单元素</a></dd>
					<dd><a href="#">第六章：CSS基础语法讲解</a></dd>
					<dd><a href="#">第七章：背景详解</a></dd>
					<dd><a href="#">第八章：CSS样式</a></dd>
				</dl>
				<div class="but"></div>
			</div>
		</li>
		<li><span>&#xe621;</span>移动端开发
			<div class="menu">
				<dl>
					<dd><a href="#">第一章：HTML语法</a></dd>
					<dd><a href="#">第二章：HTML的标签</a></dd>
					<dd><a href="#">第三章：img图片标签</a></dd>
					<dd><a href="#">第四章：三种列表知识详解</a></dd>
					<dd><a href="#">第五章：表单元素</a></dd>
					<dd><a href="#">第六章：CSS基础语法讲解</a></dd>
					<dd><a href="#">第七章：背景详解</a></dd>
					<dd><a href="#">第八章：CSS样式</a></dd>
				</dl>
				<div class="but"></div>
			</div>
		</li>

		<li><span>&#xe7a7;</span>案列
			<div class="menu">
				<dl>
					<dd><a href="content/案列/08/选项开特效.html" target="main">for 下标实例 选项展开特效</a></dd>
					<dd><a href="content/案列/33-课件/2-register.html" target="_blank">用户注册正则认证</a></dd>
					<dd><a href="content/案列/33-课件/1-login.html" target="_blank">用户登录</a></dd>
					<dd><a href="content/案列/33-课件/3-拖拽限定边界弹性运动.html" target="_blank">拖拽限定边界弹性运动</a></dd>
					<dd><a href="#">第七章：背景详解</a></dd>
					<dd><a href="#">第八章：CSS样式</a></dd>
				</dl>
				<div class="but"></div>
			</div>
		</li>
	</ul>
</div>

<!--内容部分开始-->
<div id="content">
	<!--<iframe src="tz/index.html" width="100%" height="100%" scrolling="yes"  frameborder="no"  name="main" />-->
	<iframe src="" width="100%" height="100%" scrolling="yes"  frameborder="no"  name="main"/>
</div>
<!--内容部分结束-->


</body>
</html>